<template>
<div>
    <!-- 面包屑组件 -->
    <breadcrumb :navData="navData"></breadcrumb>

    <el-card>
        <!-- 权限列表 -->
        <el-table
            :data="rightsList"
            stripe
            border
            style="width: 100%">
            <el-table-column type="index" label="#"></el-table-column>
            <el-table-column prop="authName" label="权限名称"></el-table-column>
            <el-table-column prop="path" label="路劲"></el-table-column>
            <el-table-column prop="level" label="权限等级">
                <template slot-scope="scope">
                    <el-tag v-if="scope.row.level==0">一级</el-tag>
                    <el-tag v-if="scope.row.level==1" type="success">二级</el-tag>
                    <el-tag v-if="scope.row.level==2" type="warning">三级</el-tag>
                </template>
            </el-table-column>
        </el-table>
    </el-card>
</div>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      navData: ["权限管理", "权限列表"],
      rightsList: []
    };
  }, // 组件方法

  methods: {
    //权限列表数据请求
    async getRights(){
        let res = await this.$http.get('rights/list')
        console.log('rights_list',res);
        if(res.meta.status !== 200) return this.$message.error(res.meta.msg)
        this.rightsList = res.data
    }
  },

  created() {
      this.getRights()
  }
};
</script> 

<style  scoped>
</style>